<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网上购物系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        ul.list-group.list-group-1 {
            text-align: right;
            padding: 5px 30px 0 0;
            background: #eee;
        }
        li.list-group-item.list1 {
            display: inline-block;
            border: 0;
            background: #eee;
        }

        ul.list-group.list-group-1 a{
            color: #0e0e0e;

        }
        /******login弹出层样式****/

        .form{
            width: 350px;
            background-color: #fff;
            height: 220px;
            margin: 10px auto;
        }
        .form>div{
            position: relative;
            line-height: 100%;
            margin-bottom: 8px;
        }
        .form>div input{
            width: 100%;
            height: 35px;
            border-radius: 3px;
            border: 1px solid #ddd;
            text-indent: 40px;
        }
        .form>div label{
            position: absolute;
            left: 0;
            top:10px;
            width: 30px;
            text-align: right;
            color: #808080;
        }
        .form .yanzhengma input{
            width: 50%;
            text-indent: 10px;
        }
        .form .yanzhengma img{
            height: 30px;
            width: 75px;
            font-size: 0;
            vertical-align: middle;
        }
        .form .yanzhengma a{
            font-size: small;
            text-decoration: none;
            color: #00a5e0;
        }
        .form>div.chk label{
            width: 100px;
            padding-left: 20px;
        }
        .form>div.chk input{
            width: 22px;
            height: 22px;
            margin-top: 8px;
        }
        .form>div.chk a{
            float: right;
            margin-top: 9px;
            text-decoration: none;
            color: #00a5e0;
        }
        .buts button{
            width: 48%;
            float: left;
        }
        .buts button:first-child{
            margin-right: 4%;
        }
        /************login弹出层样式结束********************/
    </style>
    <style>
        .container {
            background: cornsilk;
        }
        img{
            width: 100%;
        }
        ul{
            border: 0;
        }
        .list-group-item{
            margin-bottom: 0;
            border: 0;
            border-bottom: 1px dashed #ddd;
            background-color: inherit;
        }
        .list2{
            border-bottom: 0;
        }
        .panel-default>.panel-heading {
            color: #e4393c;
            background-color: #f7f7f7;
            border-color: #fff;
        }
        .panel-default {
            border-color: #fff;
        }
        .panel-group .panel-heading+.panel-collapse>.panel-body {
            border-top: 1px solid #fff;
        }
        .save {
            padding: 6px 30px;
        }
    </style>
    <style>
        .headimg{
            border-radius: 50%;
            width: 100px;
        }
        .headimga{
            display: inline-block;
            margin-left: 50%;
            transform: translate(-50%,0);
        }
        .hdimglist{
            text-align: center;
            padding: 0;
        }
        .hdimglist li img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .hdimglist li{
            display: inline-block;
            list-style: none;
        }
        @media (min-width: 768px){
            .modal-dialog {
                width: 400px;
                margin: 200px auto;
            }
        }
        .a-upload {
            position: relative;
            display: inline-block;
            width: 90px;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;

        }
        .a-upload  input {
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            width: 90px;
            height: 35px;
            filter: alpha(opacity=0);
            cursor: pointer;
        }
        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
    </style>
    <style>
        .container {

        }
        img{
            width: 100%;
        }
        ul{
            border: 0;
        }
        .list-address li{
            border: 0;
            list-style: none;
            margin: 10px 18px 15px 0;
            background: url("images/address.png") no-repeat;
            height: 162px;
            width: 240px;
            background-position: -240px 0;
        }
        .list-address li:hover{
            background-position: -480px 0;
        }
        .list-address li.active,.list-address li.active:hover{
            background-position: 0 0;
        }
        .table>tbody>tr>td,.table>tbody>tr>th{
            position: relative;
            text-align: center;
            border-bottom: 1px solid #ddd;
            border-top: 0;
        }
        p {
            margin: 5px 0 5px 0;
        }
        h3{
            margin-top: 0;
        }
        .footer{
            height: 40px;
            line-height: 40px;
            text-align: right;
            margin-bottom: 80px;
        }
        select{
            -webkit-appearance: none;
            height: 32px;
            border-radius: 5px;
            border: 1px solid #ddd;
            text-align: center;
            padding: 0 10px;
        }

    </style>
    <style>
        /* 删除按钮样式 */
        .delete-address-btn {
            position: absolute;
            top: 3%;
            left: 2%;
            transform: translate(-50%, -50%);
            background-color: #dc3545;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            padding: 0;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            z-index: 1;
        }

        /* 悬停时按钮颜色变化 */
        .delete-address-btn:hover {
            background-color: #c82333;
        }

        /* 调整X图标的位置 */
        .delete-address-btn i {
            position: relative;
            top: 1px; /* 调整图标位置，使其在圆心显示 */
        }

    </style>
</head>
<body>
<!--顶部导航-->
<ul class="list-group list-group-1" id="top-part">
    <li class="list-group-item list1"><a href="./index.jsp"><i class="fa fa-home"></i> 首页</a></li>
    <c:if test="${empty user }">
        <li class="list-group-item list1">登录【<a href="" data-toggle="modal" data-target="#myModalLogin" style="font-size: small;color:#e4393c ">请登录</a>】</li>
    </c:if>
    <c:if test="${!empty user }">
    <li role="presentation" class="dropdown list-group-item list1">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                <img src="${user.headImg }" style="border-radius: 50%;width: 25px;height: 25px;"/><b>${user.nickname }</b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="user.jsp">个人设置</a></li>
                <li><a href="../logout">退出</a></li>
            </ul>
            <c:if test="${user.role == 1}">
                <li class="list-group-item list1"><a href="../backend/main.jsp"><i class="fa fa-cog"></i> 后台管理</a></li>
            </c:if>
    </li>
    </c:if>
    <li class="list-group-item list1"><a href="../myCartServlet"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true" style="color:#c63205"></span> 购物车</a></li>
    <li class="list-group-item list1"><a href="../selectOrder"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 我的订单</a></li>
</ul>
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myLoginModalLabel">欢迎登陆</h4>
            </div>
            <div class="modal-body">
                <form action="../login.do" class="form">
                    <div class="name">
                        <label for="loginname"><span class="glyphicon glyphicon-user"></span></label>
                        <input type="text" placeholder="用户名" id="loginname"  name="loginname">
                    </div>
                    <div class="password">
                        <label for="pwd"><span class="glyphicon glyphicon-lock"></span></label>
                        <input type="password" placeholder="请输入密码"  id="pwd" name="pwd">
                    </div>
                    <div class="yanzhengma">
                        <input type="text" placeholder="输入验证码"  id="yanzhengma" name="yanzhengma" width="50%">
                        <img src="images/yanzhengma.JPG" alt="" height="35" width="80">
                        <a href="#">换一张</a>
                    </div>
                    <div class="chk">
                        <label for="ch1" width="60px">10天免登陆</label>
                        <input type="checkbox" id="ch1">
                        <a href="register.jsp">免费注册</a>
                    </div>
                    <div class="buts">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">登陆</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--主体内容-->
<div class="container">
    <div class="row">
        <div class="col-md-3" style="background: #f7f7f7">
            <ul class="list-group">
                <li  class="list-group-item">
                    <div>
                        <a class="headimga" data-toggle="modal" data-target="#myModalUserImg"><img src="${user.headImg }" class="headimg"></a>
                        <p class="text-center">${user.nickname }</p>
                    </div>
                    <div class="modal fade" id="myModalUserImg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <form id="img_file" action="../upload.do" method="post" enctype="multipart/form-data">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myHeadModalLabel">修改头像</h4>
                                    </div>
                                    <div class="modal-body">
                                        <ul class="hdimglist">
                                            <li><img src="img/hand(1).jpg" alt=""></li>
                                            <li><img src="img/hand(2).jpg" alt=""></li>
                                            <li><img src="img/hand(3).jpg" alt=""></li>
                                        </ul>
                                        <p style="text-align: center"><a class="a-upload" style="text-decoration: none;cursor: pointer">
                                            <input type="file" name="customAvatar" value="自定义头像">自定义头像
                                        </a></p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" onclick="submitForm()">确认修改</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <a href="order.jsp">账号设置</a>
                    <ul class="list-group">
                        <li class="list-group-item list2">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">基本信息</a>
                        </li>
                        <li class="list-group-item list2">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">其他信息</a>
                        </li>
                    </ul>
                </li>
                <li class="list-group-item">
                    <a href="../selectOrder">我的订单</a>
                    <ul class="list-group">
                        <li class="list-group-item list2">
                            全部订单
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待付款
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待收货
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待评价
                        </li>
                    </ul>
                </li>
                <li class="list-group-item"><a href="../selectAddress">地址管理</a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div class="col-sm-12" style="padding-top: 25px;">
                <h3 class="title">收货地址管理</h3>
                <div class="text-right">
                    <div class="mb-0 col-md-1">
                        <a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModalAddress" style="padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;">+新增地址</a>
                    </div>
                </div>
                <br/>
                <br/>
                <ul class="list-address mt-3">
                    <c:if test="${!empty myAddresses }">
                        <c:forEach var="address" items="${myAddresses }">
                            <li class="col-sm-12 mb-3 border rounded p-3"
                                data-addressId='${address.addressId}'
                                data-default='${address.defaultAddress}'
                                data-province='${address.province}'
                                data-city='${address.city}'
                                data-county='${address.county}'
                                data-detail='${address.detailAddress}'
                                data-recipient='${address.recipientName}'
                                data-phone='${address.recipientPhone}'>
                                <!-- 删除按钮 -->
                                <button type="button" class="btn btn-danger btn-circle delete-address-btn" onclick="deleteAddress('${address.addressId}')">
                                    x
                                </button>
                                <div class="row">
                                    <div class="col-sm-9">
                                        <h4>收件人： ${address.recipientName}</h4>
                                        <div style="padding-top: 5px;">
                                            <p>详细地址：${address.address}</p>
                                            <p>联系电话：${address.recipientPhone}</p>
                                        </div>
                                        <div>
                                            <c:if test="${address.defaultAddress eq 1}">
                                                <span class="badge badge-primary" style="background-color: #007bff; font-size: 12px; padding: 6px 10px; border-radius: 4px;">
                                                    <i class="fas fa-check-circle mr-1"></i> 默认地址
                                                </span>
                                            </c:if>
                                        </div>
                                    </div>
                                    <div class="col-sm-3 text-right">
                                        <button type="button" class="btn btn-info mt-2" onclick="populateModal(this)">修改</button>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModalAddress" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加收货地址</h4>
            </div>
            <form id="userAddressForm" action="../addAddress" method="post" >
                <div class="modal-body" style="overflow: auto">
                    <form class="form-horizontal col-sm-10" >
                        <div class="form-group">
                            <label for="recipientName" class="col-sm-3 control-label">姓名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="recipientName" name="recipientName" placeholder="收货人姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="recipientPhone" class="col-sm-3 control-label">电话</label>
                            <div class="col-sm-9">
                                <input type="tel" class="form-control" id="recipientPhone" name="recipientPhone" placeholder="电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收货地址</label>
                            <div class="col-sm-9">
                                <select id="s_province" name="s_province"></select>
                                <select id="s_city" name="s_city" ></select>
                                <select id="s_county" name="s_county"></select>
                                <script class="resources library" src="js/area.js" type="text/javascript"></script>
                                <script type="text/javascript">_init_area();</script>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="detailAddress" class="col-sm-3 control-label">详细地址</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="detailAddress" name="detailAddress" placeholder="详细地址">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="submitBtn" class="btn btn-primary">确认添加</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="myUpdateModalAddress" tabindex="-1" role="dialog" aria-labelledby="myUpdateModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myUpdateModal">修改收货地址</h4>
            </div>
            <form id="userUpdateAddressForm" action="../updateAddress" method="post" >
                <div class="modal-body" style="overflow: auto">
                    <form class="form-horizontal col-sm-10" >
                        <div class="form-group">
                            <label for="updateRecipientName" class="col-sm-3 control-label">姓名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="updateAddressId" name="updateAddressId" style="display: none;">
                                <input type="text" class="form-control" id="updateRecipientName" name="updateRecipientName" placeholder="收货人姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="updateRecipientPhone" class="col-sm-3 control-label">电话</label>
                            <div class="col-sm-9">
                                <input type="tel" class="form-control" id="updateRecipientPhone" name="updateRecipientPhone" placeholder="电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收货地址</label>
                            <div class="col-sm-9">
                                <select id="u_province" name="u_province"></select>
                                <select id="u_city" name="u_city" ></select>
                                <select id="u_county" name="u_county"></select>
                                <script class="resources library" src="js/area.js" type="text/javascript"></script>
                                <script type="text/javascript">_init_u_area();</script>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="updateDetailAddress" class="col-sm-3 control-label">详细地址</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="updateDetailAddress" name="updateDetailAddress" placeholder="详细地址">
                            </div>
                         </div>
                        <div class="form-group">
                            <label for="updateDefaultAddress" class="col-sm-3 control-label">默认地址</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="updateDefaultAddress" name="updateDefaultAddress">
                                    <option  value="1">是</option>
                                    <option  value="0">否</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="updateSubmitBtn" class="btn btn-primary">确认修改</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var addressList = document.querySelector('.list-address');
        if (addressList) {
            var liItems = addressList.querySelectorAll('li');
            liItems.forEach(function(li) {
                var isDefault = parseInt(li.getAttribute('data-default'));
                if (isDefault === 1) {
                    li.classList.add('active');
                }
            });
        }
    });
    //地址选中
    $(document).ready(function() {
        $('.list-address li').click(function() {
            $('.list-address li').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#myModalAddress').on('shown.bs.modal', function () {
            $('#submitBtn').on('click', function() {
                // 提交表单
                $('#userAddressForm').submit();
                // 关闭模态框
                $('#myModalAddress').modal('hide');
            });
        });
    });
    $(document).ready(function() {
        $('#myUpdateModalAddress').on('shown.bs.modal', function () {
            $('#updateSubmitBtn').on('click', function() {
                // 提交表单
                $('#userUpdateAddressForm').submit();
                // 关闭模态框
                $('#myUpdateModalAddress').modal('hide');
            });
        });
    });
</script>
<script>
    function populateModal(button) {
        // 获取 address item 的 li 元素
        var li = button.closest('li');

        // 调试输出
        console.log('Button:', button);
        console.log('Closest li:', li);

        if (li) {
            // 获取地址信息
            var recipientName = li.getAttribute('data-recipient');
            var phone = li.getAttribute('data-phone');
            var province = li.getAttribute('data-province');
            var city = li.getAttribute('data-city');
            console.log('Closest city:', city);
            var county = li.getAttribute('data-county');
            console.log('Closest county:', county);
            var detail = li.getAttribute('data-detail');
            var isDefault = li.getAttribute('data-default');
            var addressId = li.getAttribute('data-addressId');
            // 填充模态框的输入字段
            document.getElementById('updateRecipientName').value = recipientName;
            document.getElementById('updateRecipientPhone').value = phone;
            document.getElementById('u_province').value = province;
            document.getElementById('u_city').value = city;
            document.getElementById('u_county').value = county;
            document.getElementById('updateDetailAddress').value = detail;
            document.getElementById('updateDefaultAddress').value = isDefault;
            document.getElementById('updateAddressId').value = addressId;

            // 显示模态框
            $('#myUpdateModalAddress').modal('show');
        } else {
            console.error('无法找到最近的 li 元素。');
        }
    }
</script>
<script>
    function deleteAddress(addressId) {
        if (confirm("确定要删除这个地址吗？")) {
            $.ajax({
                url: '../deleteAddress',
                type: 'POST',
                data: { addressId: addressId },
                success: function(response) {
                    alert("地址删除成功");
                    location.reload(); // 重新加载页面以刷新地址列表
                },
                error: function(xhr, status, error) {
                    console.error("删除地址时发生错误: " + error);
                }
            });
        }
    }
</script>
<script>
    window.onload = function() {
        checkError();
    }
    function checkError() {
        var errorMsg = "${errorMsg}";
        var successMsg = "${successMsg}";
        if (successMsg){
            alert(successMsg);
            <% session.removeAttribute("successMsg"); %>
        }
        if (errorMsg) {
            alert(errorMsg);
            <% session.removeAttribute("errorMsg"); %>
        }
    }
</script>
</html>
